<template>
	<view class="page" style="background: #EEE;">
		<view class="my_padding">
			<view class="prod_img">
				<img style="width: 100%;" :src="weburl + detail.img"/>
			</view>
			<view class="bgbgbg">
				<view class="tab-bar">
					<view class="info_bg"></view>
					<uni-grid :column="3" :highlight="false" :showBorder='false' style="height:80px; padding-top: 30rpx;">
						<uni-grid-item style="height:80px; width: 31vw;">
							<view class="grid-item-box" style="padding:2px 0;text-align: center;">
								<view class="number">{{ detail.day }} 天</view>
								<text class="text">期限</text>
							</view>
						</uni-grid-item>
						<uni-grid-item style="height:80px; width: 31vw;">
							<view class="grid-item-box" style="padding:2px 0;text-align: center;">
								<view class="number">￥{{ detail.min }}</view>
								<text class="text">价格</text>
							</view>
						</uni-grid-item>
						<uni-grid-item style="height:80px; width: 31vw;">
							<view class="grid-item-box" style="padding:2px 0;text-align: center;">
								<view class="number">￥{{ detail.min*detail.rate/100 }}/天</view>
								<text class="text">收益</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
				
				<view style="margin-top:6px;width: 94vw;margin-left:3vw;">
					 
					<view class="contentinfo">
						<rich-text :nodes="detail.content" class="richText  "></rich-text>
					</view>
					 
				</view>
				
				<view class="invite_now" @tap="showOrder(2)">余额签约</view>
			</view>
		</view>
		
		<popup-bottom :show="showtrial" @close="showtrial=false" borderRadius='20'>
			<view class="contenta">
				<view class="order_tit">体验金签约</view>
				<view class="order_detail">
					<view class="det_item">
						<view class="det_l">产品价格</view>
						<view class="det_r"><span>{{ detail.min }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">产品总收益</view>
						<view class="det_r"><span>{{ parseFloat(detail.min*detail.rate/100 * detail.day).toFixed(2) }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">开始时间</view>
						<view class="det_r"><span>{{ detail.time }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">结束时间</view>
						<view class="det_r"><span>{{ detail.endtime }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">产品期限</view>
						<view class="det_r"><span>{{ detail.day }}</span> 天</view>
					</view>
				</view>
				
				<view class="canuse">
					<view class="canuse_l" @tap="readAgreement">《用户签约协议》</view>
					<view class="canuse_r">
						<view class="canuse_tit">可用体验金</view>
						<view class="canuse_money"><span>{{ usertrial }}</span></view>
					</view>
				</view>
				
				<view class="submit_order" @click="TrialOrderfinish()">确认签约</view>
			</view>
		</popup-bottom>
		<popup-bottom :show="showPopu" @close="showPopu=false" borderRadius='20'>
			<view class="contenta">
				<view class="order_tit">余额签约</view>
				<view class="order_detail">
					<view class="det_item">
						<view class="det_l">产品价格</view>
						<view class="det_r" v-if="detail.class != 6"><span>{{ detail.min }}</span> 元</view>
						<view class="det_r det_input" v-else-if="detail.class == 6"><input type="number" v-model="detail.min" :min="detail.min"> <view>元</view></view>
					</view>
					<view class="det_item">
						<view class="det_l">产品总收益</view>
						<view class="det_r"><span>{{ parseFloat(detail.min*detail.rate/100 * detail.day).toFixed(2) }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">开始时间</view>
						<view class="det_r"><span>{{ detail.time }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">结束时间</view>
						<view class="det_r"><span>{{ detail.endtime }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">产品期限</view>
						<view class="det_r"><span>{{ detail.day }}</span> 天</view>
					</view>
				</view>
				
				<view class="canuse">
					<view class="canuse_l" @tap="readAgreement">《用户签约协议》</view>
					<view class="canuse_r">
						<view class="canuse_tit">可用余额</view>
						<view class="canuse_money"><span>{{ usercoin }}</span></view>
					</view>
				</view>
				
				<view class="submit_order" @click="enterSuccess()">确认签约</view>
			</view>
		</popup-bottom>		
		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog type="ok" :content="message" :show-cancel-button="false"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="popupAgreement" type="dialog">
			<uni-popup-rich-text type="ok" :content="detail.xieyi" :show-cancel-button="false" :title="agreement_title"
				@confirm="dialogConfirm"></uni-popup-rich-text>
		</uni-popup>
			    <view>
			        <payKeyboard v-if="showTrialOrderKeyBoard" title="超脑智算安全键盘" @success="TrialOrderfinish" @close="close"></payKeyboard>
			    </view>
			    <view>
			        <payKeyboard v-if="showKeyBoard" title="超脑智算安全键盘" @success="enterSuccess" @close="close"></payKeyboard>
			    </view>				

	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupRichText from '@/components/uni-popup/uni-popup-richtext.vue'
	import popupBottom from '@/components/uni-popup/uni-popup-bottom.vue'
	import validcode from "@/components/validCode/validCode.vue";
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	export default {
		components: {
			tabBar,
			uniPopupDialog,
			uniPopupRichText,
			popupBottom,
			validcode,
			payKeyboard
		},
		
		data() {
			return {
				id: 0,
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				detail:[],
				currentPage: '/pages/user/person',
				unit: '',
				modalName:null,
				favorite: 0,
				usercoin: 0,
				usertrial: 0,
				showTrialOrderKeyBoard: false,
				showKeyBoard: false,
				isSubmitting: false,
				detailList: [{
					name: '期限',
					number: '1'
				}, {
					name: '价格',
					number: '￥1500'
				}, {
					name: '收益',
					number: '￥12/天'
				}],
				navIndex: 0,
				tabBars: [{
					name: '项目介绍',
					id: 'jieshao'
				}, {
					name: '公司简介',
					id: 'jianjie'
				}],
				message: "签约成功，查看我的签约",
				showPopu: false,
				showtrial: false,
				agreement_title:'签约协议',
			};
		},

		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if (currPage.$vm.bank_id){
				this.bank_id = currPage.$vm.bank_id;
				// this.loadData();
			}
		},
		onPullDownRefresh() {
			this.page = 1,
			this.lastPage = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			
			setTimeout(() => {
				this.getInvestDetail();
			}, 300);
		},		
		onLoad: function(option) {
			this.id = option.id
			this.getInvestDetail();
		},
		methods: {
			// 点击[取消] 关闭输入框 的回调
			close(){
				this.showKeyBoard = false;
				this.showTrialOrderKeyBoard = false;
			},
			tabBarChange(val){
				this.navToUrl(this.detailList[val.detail.index].url)
			},
			toggleFavorite: function() {
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['code=' + this.id, 'token=' + info.token, 'timestamp=' + timestamp]);
					this.helper.req({
						api: "dofav",
						timestamp: timestamp,
						data: {
							code: this.id,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'POST',
					}).then(res => {
						if (res.data.message === "success") {
							this.favorite = this.favorite === 1 ? 0 : 1;
							uni.showToast({
								title: this.favorite === 1 ? "收藏成功" : "已取消收藏",
								icon: "success"
							});
						} else {
							uni.showToast({
								title: "提交失败",
								icon: "none"
							});
						}
					}).catch(error => {
						uni.showToast({
							title: "网络错误，请稍后重试",
							icon: "none"
						});
					});
				}
			},
			getInvestDetail: function(){
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['code=' + this.id, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getInvestDetail",
						timestamp: timestamp,
						data: {
							code: this.id,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						var content = res.data.data.projectItem.content
						content = content.replace(/<img/gi,'<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
						this.detail = res.data.data.projectItem
						this.detail.content = content
						this.usercoin = res.data.data.usercoin
						this.usertrial= res.data.data.usertrial
						this.favorite = res.data.data.favorite
						console.log('investDetail:', this.detail)
						uni.stopPullDownRefresh();
					})
				}
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},
			showDialog(){
				this.toggleMessage()
			},
			toggleMessage() {
				this.$refs.popupDialog.open()
			},
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			scroll: function(e) {
				console.log(e)
				this.scrollTop = e.detail.scrollTop
			},
			showOrder: function(type){
				if (type===2){
					this.showPopu = true
				}else if (type===1){
					this.showtrial = true
				}
			},
			submitOrder: function(){
				uni.navigateTo({
					url: '/pages/invest/form?code='+ this.id
				})
			},
			submitTrialOrder:function(){
				if(parseFloat(this.detail.min) > parseFloat(this.usertrial)){
					uni.showToast({
						title:"签约券不足",
						icon:"error"
					})
					this.showtrial = false
					return;
				}
				this.showtrial = false
				this.showTrialOrderKeyBoard = true;
			},
			TrialOrderfinish: function(e) {
				if (this.isSubmitting) return;

				if(parseFloat(this.detail.min) > parseFloat(this.usertrial)){
					uni.showToast({
						title:"签约券不足",
						icon:"error"
					})
					this.showtrial = false
					return;
				}
				this.isSubmitting = true;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['amount='+parseFloat(this.detail.min),'jiaxiquan_id=0','coupon_id=0','code='+this.id,'timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"createTrialOrder",
					timestamp:timestamp,
					data:{amount: parseFloat(this.detail.min),jiaxiquan_id: 0,coupon_id: 0,code:this.id,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					this.isSubmitting = false;
					var investid = res.data.data[0]
					if (investid){
						uni.redirectTo({
							url: "/pages/invest/invest?code="+investid
						})
					}else{
						uni.redirectTo({
							url: "/pages/invest/orders"
						})
					}
				}).catch(error => {
					this.isSubmitting = false;
					uni.showToast({
						title: "网络错误，请稍后重试",
						icon: "none"
					});
				})
			},
			submit: function() {
				if(parseFloat(this.detail.min) > parseFloat(this.usercoin)){
					uni.showToast({
						title:"余额不足",
						icon:"error"
					})
					return;
				}
			},
			enterSuccess: function(e) {
				console.log("isSubmitting:",this.isSubmitting)
				if (this.isSubmitting) return;

				this.modalName = null;
				if(parseFloat(this.detail.min) > parseFloat(this.usercoin)){
					uni.showToast({
						title:"余额不足",
						icon:"error"
					})
					return;
				}
				this.isSubmitting = true;
				this.showKeyBoard = false;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['amount='+parseFloat(this.detail.min),'jiaxiquan_id=0','coupon_id=0','code='+this.id,'timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"createInvestOrder",
					timestamp:timestamp,
					data:{amount: parseFloat(this.detail.min),jiaxiquan_id: 0,coupon_id: 0,code:this.id,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					console.log("data:",res)
					this.isSubmitting = false;
					var investid = res.data.data[0]
					if (investid){
						uni.redirectTo({
							url: "/pages/invest/invest?code="+investid
						})
					}else{
						uni.redirectTo({
							url: "/pages/invest/orders"
						})
					}
				}).catch(error => {
					this.isSubmitting = false;
					uni.showToast({
						title: "网络错误，请稍后重试",
						icon: "none"
					});
				})
			},
			hideModal: function() {
				this.modalName = null,
				this.isSubmit = !1
			},
			readAgreement: function(){
				this.showPopu = false
				this.showtrial = false
				this.toggleAgreement()
			},
			toggleAgreement() {
				this.$refs.popupAgreement.open()
			},
			hideModal: function() {
				this.modalName = null,
				this.isSubmit = !1
			},
		},
	};
</script>

<style lang="scss">
	page {
		font-size: 3.46667vw;
		min-width: 325px;
		padding-bottom: 16px;
		background-size: cover;
		background: #dceafb;
	}
	
	.my_padding {
		background: #dceafb;
		height: 100%;
	}
	.bgbgbg{
		position: relative;
		z-index: 5;
		padding-top: 50rpx;
		background: #dceafb;
	}
	.tab-bar{
		width: 94vw;
		margin: 3vw;
		height: 152rpx;
		position: relative;
		.info_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: linear-gradient(to bottom, #a1c3ff, #4f8efd);
			 
			border-radius:10px;
		}
	}
	
	.invite_part{
		height: 200vw;
	}
	
	.prod_img{
		width: 100%;
		position: relative;
		display: flex;
	}
	.prod_img:after {
		position: absolute;
		content: '';
		inset: 0;
		box-shadow: inset 0px -20px 20px 0px #dceafb;
	}
	.prod_img image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.prod_title{
		margin-top: 2px;
		padding: 10px 16px;
		font-size: 17px;
		font-weight: bold;
		color:#fff;
		// background: #fff;
	}
	
	.invite_now{ 
		height: 83rpx;
		width: 520rpx;
		border-radius: 50rpx;
		position: fixed;
		bottom: 100rpx; 
	    background: linear-gradient(to bottom, #a1c3ff, #4f8efd);
		text-align: center;
		line-height: 83rpx;
		color: #fff;
		font-weight: bold;
		left: 50%;
		margin-left: -260rpx;
		
	}
	.chat{
		position: absolute;
		top: 10px;
		left: 10px;
		width: 40px;
		height: 40px;
	}
	.chat image{
		width: 20px;
		height: 20px;
		margin-top:4px;
	}
	.order_part{
		position: absolute;
		//top: 0px;
		// left: 15%;
		// width: 70%;
		// background-color: #00dccb;
		color:#fff;
		// border-radius: 20px;
		// // padding: 4px 10px;
		// line-height: 38px;
	}
	// .order_try{
	// 	font-size: 14px;
	// 	width: 50%;
	// 	float:left;
	// 	text-align: center;
	// 	border-radius: 20px;
	// }
	.order_pay{
		font-size: 14px;
		width: 100vw;
		//float: right;
		background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		text-align: center;
		border-radius: 0 20px 20px 0;
		border-radius: 20px;
		line-height: 38px;
	}
	.collect{
		position: absolute;
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
	}
	.collect image{
		width: 24px;
		height: 24px;
	}
	
	.grid-item-box text{
		line-height: 24px;
		display: inherit;
		font-size: 14px; 
		color:#353535;
	}
	.grid-item-box .number{
		font-size: 15px;
		 font-weight: bold;
		color: #fff;
		line-height: 4vw;
		// height: 8vw;
		padding: 1.5vw 0;
	    font-weight: 30rpx;
		border-radius: 4vw;
		 
	}
	.contentinfo{
        width: 100%;
		min-height: 300px;
		padding: 10px;
		font-size: 14px;
		line-height: 24px;
		padding-bottom: 50px;		
	}	
    .contenta {
        width: 100%;
		min-height: 300px;
		padding: 10px;
		background: #ffffff;
		font-size: 14px;
		// line-height: 24px;
    }
	.order_tit{
		line-height: 30px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #EEE;
	}
	.order_detail{
		margin: 10px 0 0;
		padding: 10px;
		background-color: #dceafb;
		font-size: 14px;
		height: 194px;
	}
	.det_item{
		width: 100%;
		line-height: 36px;
	}
	.det_l{
		font-size: 14px;
		width: 30%;
		float:left;
	}
	.det_r{
		font-size: 14px;
		width: 70%;
		float:right;
		text-align: right;
	}
	.det_r span{
		color:#333;
		font-weight: bold;
		font-size: 17px;
		// padding: 0 6px;
	}
	.det_r input{
		height: 36px;
		width: 90%;
		border:1px solid #CCC;
		border-radius: 4px;
		padding-right: 10px;
		margin: 0 10px;
		font-size: 17px;
	}
	.det_input{
		display: flex;
		width: 50%;
		margin-left: 20%;
	}
	.canuse{
		width: 100%;
		height: 50px;
		margin-top: 14px;
	}
	.canuse_l{
		width: 40%;
		float:left;
		padding: 8px 10px;
	}
	.canuse_r{
		width: 58%;
		float:right;
		position: relative;
	}
	.canuse_tit{
		height: 30px;
		line-height: 40px;
		width: 80px;
		position: absolute;
		left: 0;
		top: 0;
		// float: right;
		text-align: right;
	}
	.canuse_money{
		line-height: 30px;
		min-width: 80px;
		float: right;
		color: #2190ff;
		font-size: 26px;
		padding-right: 4px;
		text-align: right;
	}
	
	.submit_order{
		width: 100%;
		padding: 10px;
		background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		color: #fff;
		font-size: 15px;
		text-align: center;
		border-radius: 6px;
	}
 
    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
        color: #666;
    }
 
    .scroll-view-item_H {
        display: inline-block;
        width: 50%;
        /* height: 50rpx; */
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        padding: 6px 0;
    }
	.activite {
	    color: #000;
	    font-size: 15px;
	    font-weight: bold;
	    border-bottom: 2px solid #000;
	    /* background-color: aliceblue; */
	}
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    /deep/.uni-scroll-view::-webkit-scrollbar {
        display: none
    }
	
.richText img {
    min-width: 100%; /* 图片最大宽度为容器的100% */
    height: auto; /* 图片高度自动调整，保持宽高比 */
}
</style>
